<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页信息</title>
    <link rel="stylesheet" href="../vendors/layui/css/layui.css">
    <link rel="stylesheet" href="../css/main.css">

    <script src="../vendors/layui/layui.js"></script>
    <script src="../vendors/jQuery/jquery.min.js"></script>
    <script src="../vendors/echarts/echarts.min.js"></script>

    <style>
        .listbox,
        .chart-warp,
        .info-list-warp,
        .notice-list-warp {
            border: 1px solid #d6d6d6;
        }
    </style>
</head>

<body>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <s src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></s>
    <![endif]-->

    <div class="layui-fluid">


        <!-- 顶部列表 -->
        <ul class="top-list layui-row layui-col-space10">
            <li class="layui-col-xs2">
                <div class="listbox">
                    <i class="list-icon layui-icon">&#xe60a;</i>
                    <em>25<p>待办事项</p></em>
                </div>
            </li>
            <li class="layui-col-xs2">
                <div class="listbox">
                    <i class="list-icon layui-icon">&#xe63c;</i>
                    <em>16<p>档案管理</p></em>
                </div>
            </li>
            <li class="layui-col-xs2">
                <div class="listbox">
                    <i class="list-icon layui-icon">&#xe62c;</i>
                    <em>198<p>大数据统计</p></em>
                </div>
            </li>
            <li class="layui-col-xs2">
                <div class="listbox">
                    <i class="list-icon layui-icon">&#xe60b;</i>
                    <em>10<p>项目信息</p></em>
                </div>
            </li>
            <li class="layui-col-xs2">
                <div class="listbox">
                    <i class="list-icon layui-icon">&#xe637;</i>
                    <em>15<p>日程管理</p></em>
                </div>
            </li>
            <li class="layui-col-xs2">
                <div class="listbox">
                    <i class="list-icon layui-icon">&#xe681;</i>
                    <em>7<p>云计算</p></em>
                </div>
            </li>
        </ul>
        <!-- list-end -->
        <!-- 图表列表 -->
        <ul class="chart-list layui-row layui-col-space10">
            <li class="layui-col-xs4">
                <div class="chart-warp">
                    <div class="title">
                        <h3>仪表盘</h3>
                        <a href="javascript:;">更多<i class="layui-icon">&#xe623;</i></a>
                    </div>
                    <div id="guage" class="charts"></div>
                </div>
            </li>

            <li class="layui-col-xs4">
                <div class="chart-warp">
                    <div class="title">
                        <h3>数据统计</h3>
                        <a href="javascript:;">更多<i class="layui-icon">&#xe623;</i></a>
                    </div>
                    <div id="Stacked-area-chart" class="charts"></div>
                </div>
            </li>
            <li class="layui-col-xs4">
                <div class="chart-warp">
                    <div class="title">
                        <h3>柱状图</h3>
                        <a href="javascript:;">更多<i class="layui-icon">&#xe623;</i></a>
                    </div>
                    <div id="bar" class="charts"></div>
                </div>
            </li>
        </ul>

        <!-- chart-list-end -->

        <!-- 底部列表 -->
        <div class="down-list layui-row layui-col-space10">
            <!-- 订单列表 -->
            <div class="info-list layui-col-xs8">
                <div class="info-list-warp">
                    <div class="title">
                        <h3 style="padding-left: 10px;">最新订单</h3>
                        <a href="javascript:;">更多<i class="layui-icon">&#xe623;</i></a>
                    </div>
                    <!-- 订单数据表格 -->
                    <table lay-filter="demo" id="info-table">
                        <thead>
                            <tr>
                                <th lay-data="{field:'uid'}">订单编号</th>
                                <th lay-data="{field:'money'}">订单金额(元)</th>
                                <th lay-data="{field:'date'}">下单时间</th>
                                <th lay-data="{field:'completed'}">交易完成日期</th>
                                <th lay-data="{field:'pid'}">卖家ID</th>
                                <th lay-data="{field:'opera'}">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- info-list-end -->

            <!-- 通知列表 -->
            <div class="notice-list layui-col-xs4">
                <div class="notice-list-warp">
                    <div class="title">
                        <h3>通知公告</h3>
                        <a href="javascript:;">更多<i class="layui-icon">&#xe623;</i></a>
                    </div>
                    <ul class="notice">


                    </ul>
                </div>
            </div>

            <!-- notice-list-end -->
        </div>

        <!-- 底部列表结束 -->
    </div>
    <script src="../js/main.js"></script>
</body>

</html>